import React from "react"
import { useIntl,connect, ConnectProps } from 'umi';
import { PageContainer } from '@ant-design/pro-layout'
import SeatArea from './components/SeatArea'
import './index.less'
import { Input,Button } from 'antd';
import SearchAirline from './components/SearchAirline'
import {ReloadOutlined} from '@ant-design/icons'
import { useEffect } from 'react';
interface PageProps extends ConnectProps {
    info:any
}
const PassengerInfo : React.FC<PageProps>=(props) => {
    const intl = useIntl();
    const {dispatch}=props
    const {flight_id,s_time}=props.info
    const desc=flight_id&&s_time?(<div className='desc'>您所选择的是 {s_time}起飞的{flight_id}航班</div>):''
    useEffect(() => {
        dispatch({
            type: "passengerInfo/save",
            payload: {
                current: {},
                showSearch:false,
            }
        })
    }, [])
    return (
        <div>
            <PageContainer
                content={intl.formatMessage({
                    id: 'pages.admin.subPage.title',
                    defaultMessage: '这个页面只有 admin 权限才能查看',
                })}
                extra={
                    <>
                        <Button type="primary" icon={<ReloadOutlined />} 
                        onClick={()=>{
                            dispatch({
                                type:"passengerInfo/loadData",
                                payload:{}
                            })
                        }}/>
                        <Button onClick={()=>{
                            dispatch({
                                type:"passengerInfo/save",
                                payload:{
                                    showSearch:true,
                                    current:{}
                                }
                            })
                        }}>查询航班</Button>
                    </>}
                >
                <br/>
                {desc}
                <div className="aircraft-info-box">
                    <img style={{ height: "100%" }} src={require('./assets/aircraft.png')} />
                    <SeatArea />
                </div>
                <SearchAirline/>
            </PageContainer>
        </div>
    )
}
// export default PassengerInfo
export default connect((state: any) => {
    return {
        info: state.passengerInfo
    }
})(PassengerInfo)